<template>
	<view class="custom-dialog" v-show="show">
		<view class="content">
			<!-- 在任意位置插入这个控件,就可以在外部调用的时候事实显示数据-->
			<!-- <slot></slot> -->
			<view class="top">
				<text>{{item.goods_name}}</text>
				<image src="@/static/store_close.png" @click="closeBtnClik"></image>
			</view>
			<view class="line"></view>

			<view class="center">
				<view class="status">
					<text>状态:</text>
					<uni-data-checkbox class="uni-status-goods-name" v-model="item.status" :localdata="status"
						@change="changeBox">
					</uni-data-checkbox>
				</view>

				<view class="price">
					<text>结算价:</text>
					<input class="uni-input-goods-price" v-model="settle" placeholder="请输入价格" />

				</view>

			</view>
			<view class="btn">
				<button class="left-btn" @click="hide">取消</button>
				<button class="right-btn" @click="confirm">确认</button>
			</view>


		</view>
	</view>
</template>>

<script>
	import ajax from '@/api/api.js'
	import url from '@/api/url.js'

	export default {

		props: {
			show: {
				type: Boolean,
				default: false
			},
			item: {}, //接收传进来的模型数据

		},
		// onLoad() {
		// 	console.log('status', parseInt(item.status))

		// 	this.value = parseInt(item.status)

		// 	console.log('哈哈哈哈', this.value) //这个方法无效
		// },
		//该方法控件被创建了但数据还没有传过来
		// created() {
		// 	console.log('created', this.item.status)
		// 	this.value = parseInt(this.item.status)
		// 	console.log('created', this.value)
		// },
		beforeUpdate() {
			console.log('beforeUpdate', this.item.status)
			this.value = parseInt(this.item.status)
			console.log('beforeUpdate', this.value)
		},

		data() {
			return {
				settle: '', //结算价
				value: 1,
				status: [{
						text: '上架',
						value: 1
					},
					{
						text: '下架',
						value: 2
					}
				]
			}
		},
		methods: {
			//点击叉号图标
			closeBtnClik() {
				this.$emit('update:show', false);
			},

			//取消按钮隐藏视图
			hide() {
				this.$emit('update:show', false);
			},
			//确认方法
			confirm() {
				// changeData()

				if (this.settle.length === 0) {
					uni.showToast({
						title: '请输入结算价',
						icon: 'none'
					})
					return
				}

				this.$londing();
				ajax(url.goodsEdit, {
					data: {
						id: this.item.id,
						status: this.value,
						shop_price: this.settle,
						market_price: '',
						goods_name: this.item.goods_name,
						goods_cate: this.item.goods_cate,
						goods_unit: this.item.goods_unit,
						goods_spec: this.item.goods_spec,
					}
				}).then(res => {
					console.log(res)
					this.$emit('update:show', false);
					this.$eventBus.$emit('editData', 12);

					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})

				}).catch(err => {
					console.error(err)
					uni.showToast({
						title: '服务器故障,请稍后再试',
						icon: 'none'
					})
				})


			},

			//修改数据
			changeData() {
				// if (this.settle.length === 0) {
				// 	uni.showToast({
				// 		title: '请输入结算价',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
			},

			changeBox(e) {
				console.log(e)
				this.value = e.detail.value

			}
		},

	}
</script>
<style lang="scss">
	.custom-dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);


		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			// border: 1px solid #EEEEEE; //按钮 边框样式 

			text {
				color: $global-Theme-color;
				// background: red;
			}

			image {
				margin-left: 360rpx;
				width: 28rpx;
				height: 28rpx;
				// background-color: orange;

			}
		}

		.line {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			width: 100%;
			height: 1rpx;
			background-color: #EEEEEE;
		}

		.center {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;

			// justify-content: space-between;
			.status {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				// background: red;

				.uni-status-goods-name {
					margin-left: 30rpx;
				}
			}

			.price {
				margin-top: 20rpx;
				margin-bottom: 20rpx;

				display: flex;

				justify-content: flex-start;

				text:nth-child(1) {
					// background: orange;
				}

				.uni-input-goods-price {
					margin-left: 10rpx;
					// background: green;

				}
			}
		}

		.btn {
			margin-left: -35rpx;
			margin-right: -35rpx;
			margin-bottom: -35rpx;
			display: flex;
			justify-content: flex-start;
			// background: red;

			.left-btn {
				width: 50%;

				background: rgba(232, 241, 255, 1);

			}

			.right-btn {
				width: 50%;
				background-color: $global-Theme-color;

			}
		}
	}
</style>